<template>
	<unicloud-db v-slot:default="{data,loading,error,hasMore,options}" collection="movieFav">
		<view v-if="error">{{error.message}}
		</view>
		<view v-else>
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="options2" @click="del(item.movie_id)" v-for="item,index in data"
					:key="index">
					<view class="item">
						<view class="img">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="content">
							<view class="title">{{item.name}}</view>
							<view class="cat">{{item.cat}}</view>
							<view class="dir">{{item.dir}}</view>
							<view class="star">{{item.star}}</view>
							<view class="rating">{{item.rating==0?"无评分":item.rating}}</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
	</unicloud-db>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReady
	} from "@dcloudio/uni-app"
	import {
		ref,
		computed
	} from "vue"
	// 滑动组件的样式
	const options2 = ref([{
		text: '删除',
		style: {
			backgroundColor: "#c00000",
			color: "#fff",
			fontSize: '24rpx'
		}
	}])

	const unico = uniCloud.importObject("movieOper")

	function del(id) {
		let {
			deleted
		} = unico.removeFav(movieId)
	}
</script>

<style scoped lang="scss">
	.item {
		display: flex;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin: 5px;
		padding: 5px;

		.img {
			width: 150rpx;
			height: 230rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.content {
			margin-left: 5px;
			width: 550rpx;

			height: 230rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			position: relative;

			.title {
				font-size: 44rpx;
				color: #666;
			}

			.cat {
				color: #aa0000;
			}

			.dir {
				color: #333;
			}

			.rating {
				position: absolute;
				top: 10px;
				right: 10px;
				background-color: #aa0000;
				color: #fff;
				padding: 3px 5px;
				border-radius: 3px;
			}
		}
	}
</style>